<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			span {
				color: red;
			}
		</style>
		<script type="text/javascript">
			function readXML(xmlFile) {
				//初始化对象
				var xhr = new XMLHttpRequest();
				//创建请求
				xhr.open("GET", xmlFile, false); //false->同步请求
				//发送请求
				xhr.send();
				//处理响应
				var xmlDoc = xhr.responseXML;

				//获取XML中的信息
				// 双等号只比较相等性，会进行类型强制转换再比较。例如，2 == "2" 会返回 true，因为字符串 "2" 会被转换成数字 2 进行比较。

				// 三等号则不仅比较相等性，还会比较数据类型。如果两个操作数数据类型不同，则直接返回 false。例如，2 === "2" 会返回 false。
				if (xmlFile === 'person1.xml') {
					var note = xmlDoc.getElementsByTagName("note")[0].childNodes[0].nodeValue;
					var name = xmlDoc.getElementsByTagName("name")[0].childNodes[0].nodeValue;
					var tag = xmlDoc.getElementsByTagName("tag")[0].childNodes[0].nodeValue;
					var achievement = xmlDoc.getElementsByTagName("achievement")[0].childNodes[0].nodeValue;
					var describe = xmlDoc.getElementsByTagName("describe")[0].childNodes[0].nodeValue;

					//将获取到的信息展示在HTML中
					document.getElementById("note").innerHTML =  note;
					document.getElementById("name").innerHTML =  name;
					document.getElementById("tag").innerHTML =  tag;
					document.getElementById("achievement").innerHTML =  achievement;
					document.getElementById("describe").innerHTML = describe;
				} else if (xmlFile === 'person2.xml') {
					// 对于person2.xml，使用getAttribute()方法获取属性值
					var note = xmlDoc.getElementsByTagName("person")[0].getAttribute("note");
					var name = xmlDoc.getElementsByTagName("person")[0].getAttribute("name");
					var tag = xmlDoc.getElementsByTagName("person")[0].getAttribute("tag");
					var achievement = xmlDoc.getElementsByTagName("person")[0].getAttribute("achievement");
					var describe = xmlDoc.getElementsByTagName("person")[0].getAttribute("describe");

					//将获取到的信息展示在HTML中
					document.getElementById("note2").innerHTML = note;
					document.getElementById("name2").innerHTML = "姓名：" + name;
					document.getElementById("tag2").innerHTML = "头衔：" + tag;
					document.getElementById("achievement2").innerHTML = "成就：" + achievement;
					document.getElementById("describe2").innerHTML = "简述：" + describe;
				}

			}
		</script>
	</head>

	<body>
		<h1>点击按钮请求数据</h1>
		<h2>person1.xml的文本信息如下</h2>
		<div id="person1">
			标题：<span id="note"></span><br>
			姓名：<span id="name"></span><br>
			头衔：<span id="tag"></span><br>
			成就：<span id="achievement"></span><br>
			简述：<span id="describe"></span><br>
		</div>
		<button onclick="readXML('person1.xml')">读取XML文本内容</button>
		<hr>
		<h2>person2.xml的文本信息如下</h2>
		<div id="person2">
		标题：<span id="note2"></span><br>
		姓名：<span id="name2"></span><br>
		头衔：<span id="tag2"></span><br>
		成就：<span id="achievement2"></span><br>
		简述：<span id="describe2"></span><br>
		</div>
		<button onclick="readXML('person2.xml')">读取XML属性内容</button>
	</body>
</html>
